<template>
  <div  class="app-container repairWorkOrder">
    <el-form :model="selectForm" ref="queryForm" :inline="true" label-width="100px">
        
      <el-form-item label="设备名称">
        <el-input v-model="selectForm.deviceName" placeholder="请输入设备名称" clearable size="small" />
      </el-form-item>
      <el-form-item label="出厂编号">
        <el-input v-model="selectForm.factoryCode" placeholder="请输入出厂编号" clearable size="small" />
      </el-form-item>
      <el-form-item label="编号">
        <el-input v-model="selectForm.deviceCode" placeholder="请输入编号" clearable size="small" />
      </el-form-item>
      <el-form-item label="存放位置">
        <el-input v-model="selectForm.repositoryId" placeholder="请输入存放位置" clearable size="small" />
      </el-form-item>
      <el-form-item label="规格型号">
        <el-input v-model="selectForm.deviceModel" placeholder="请输入规格型号" clearable size="small" />
      </el-form-item>
      
      <el-form-item label="状态">
        <el-select size="small" v-model="selectForm.deviceStatusId" placeholder="请选择" clearable>
          <el-option v-for="item in deviceStatusList" :key="item.id" :label="item.statusName" :value="item.id"/>
        </el-select>
      </el-form-item>
      
      <el-form-item label="打印时间">
        <el-date-picker
          size="small"
          v-model="selectDate"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="dateChange"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" icon="el-icon-search" @click="selectForm.pageNum=1;getList();">搜索</el-button>
         <el-button size="mini" type="warning" icon="el-icon-printer" @click="printing">打印</el-button>
      </el-form-item>
    </el-form>
    <div class="printing">
        <el-table v-loading="loading" ref="singleTable" :data="list"  @selection-change="handleSelectionChange" stripe border >
            <el-table-column
      type="selection"
      width="55"/>
                <el-table-column align="center" type="index" label="序号" width="55"/>
                <el-table-column align="center" label="编号" width="150"  prop="deviceCode"/>
                <el-table-column align="center" label="设备名称" width="150"  prop="deviceName"/>
                <el-table-column label="出厂编号" align="center" prop="factoryCode"/>
                <el-table-column align="center" label="存放位置" prop="repositoryName" />
                <el-table-column align="center" label="规格型号" prop="deviceModel"/>
                <el-table-column align="center" label="最后打印时间" prop="createTime"/>
                <el-table-column align="center" label="图片" prop="img">
                    <template slot-scope="scope">
                        <!-- {{baseUrl()+scope.row.qrCode}} -->
                        <img :src="baseUrl()+scope.row.qrCode" alt="">
                    </template>
                    
                </el-table-column>
            </el-table>
            <pagination
            :total="total"
            :page.sync="selectForm.pageNum"
            :limit.sync="selectForm.pageSize"
            @pagination="getList"
            />
        <!-- <div class="right">
            <el-button size="mini" type="primary" icon="el-icon-printer" @click="printing">打印</el-button>
            <div>
                <img src="" alt="">
            </div>
        </div> -->
    </div>
    
  </div>
</template>
<script>
  import {treeselect} from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import { deviceStatus } from '@/api/basicInformation/index'
  
  import {printingList,printing} from '@/api/labelPrinting/index'
  
  export default {
    components: {
      Treeselect,
    },
    name: "index.vue",
    data() {
      return {
        deviceStatusList:[],
        selectForm: {
          pageNum: 1,
          pageSize: 10,
        },
       
        loading: false,//加载
        list: [],//数据
        total: 0,
        selectDate: '',//时间
        multipleSelection:[]
      }
    },

    created() {
      this.getTree()
     this.getDeviceStatus()
      this.getList()
    },
    methods: {
      //所属部门下拉
      getTree() {
        treeselect().then(response => {
          this.company = response.data;
        });
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      printing(){
          if(!this.multipleSelection.length>0) return false
          let arr=[]
          this.multipleSelection.forEach((i,index)=>{
                arr.push(i.deviceId)
                if(index==this.multipleSelection.length-1){
                    
                    printing(arr).then((res)=>{
                        if(res.code==200){
                            this.getList()
                        }
                    })
                }
          })
            

      },
     /** 查询设备状态*/
      async getDeviceStatus() {
        let res = await deviceStatus()
        this.deviceStatusList = res.rows
      },
      getList() {
        printingList(this.selectForm).then((res)=>{
          this.list=res.rows
          this.total=res.total
        })
      },
      //更改时间
      dateChange() {
        this.selectForm.startCreateTime = this.selectDate&&this.selectDate[0]||null
        this.selectForm.endCreateTime = this.selectDate&&this.selectDate[1]||null
      },
     
    },
    
  }
</script>

<style lang="scss">
  .printing {
    //   display: flex;
      .right{
          margin-left: 40px;
          border-left: 1px solid cadetblue;
          padding: 20px 40px;
      }
      img{
          width: 70px;
          height: 70px;
      }
  }
</style>
